var data = [
  {
    date: "2020-11-12",
    cases: 100,
  },
  {
    date: "2020-11-13",
    cases: 82,
  },
  {
    date: "2020-11-14",
    cases: 34,
  },
  {
    date: "2020-11-15",
    cases: 132,
  },
  {
    date: "2020-11-16",
    cases: 109,
  },
  {
    date: "2020-11-17",
    cases: 10,
  },
  {
    date: "2020-11-18",
    cases: 210,
  },
  {
    date: "2020-11-19",
    cases: 320,
  },
  {
    date: "2020-11-20",
    cases: 44,
  },
  {
    date: "2020-11-21",
    cases: 130,
  },
  {
    date: "2020-11-22",
    cases: 13,
  },
  {
    date: "2020-11-23",
    cases: 10,
  },
  {
    date: "2020-11-23",
    cases: 2,
  },
  {
    date: "2020-11-24",
    cases: 3,
  },
  {
    date: "2020-11-25",
    cases: 0,
  },
  {
    date: "2020-11-26",
    cases: 0,
  },
  {
    date: "2020-11-27",
    cases: 0,
  },

  {
    date: "2020-11-28",
    cases: 0,
  },
  {
    date: "2020-11-29",
    cases: 0,
  },
  {
    date: "2020-11-30",
    cases: 0,
  },
  {
    date: "2020-12-01",
    cases: 0,
  },
];

//当前的页码
var page = 1;
//每页的条数
var count = 9;
//获取tbody
var oTBody = document.querySelector("tbody");
//获取分页容器
var oPagination = document.querySelector(".pagination");
//获取上一页的按钮
var oPrevBtn = document.querySelector(".prev");
//获取下一页的按钮
var oNextBtn = document.querySelector(".next");
//获取搜索的输入框
var oSearchInp = document.querySelector(".searchInp");
//获取搜索按钮
var oSearchBtn = document.querySelector(".searchBtn");
//获取重置按钮
var oResetBtn = document.querySelector(".resetBtn");

function render() {
  //查看搜索框的内容
  var str = oSearchInp.value; //搜索的内容
  var searchData = []; //搜索后的数据
  if (str.trim() == "") {
    //没有搜索内容，全部都要
    searchData = data; //搜索的就是全部
  } else {
    //有搜索的内容
    for (var i = 0; i < data.length; i++) {
      //如果每条数据中的名字里面包含搜索的内容
      if (data[i].date.includes(str)) {
        //就把符合条件的内容放进渲染的数据中
        searchData.push(data[i]);
      }
    }
  }

  //让table为空
  oTBody.innerHTML = "";
  //根据count和page准备要渲染的数据
  var renderArr = searchData.slice((page - 1) * count, page * count);
  //循环要渲染的数据
  for (var i = 0; i < renderArr.length; i++) {
    //创建tr
    var oTr = document.createElement("tr");
    //给tr创建内容
    oTr.innerHTML = `
        <td>${renderArr[i].date}</td>
        <td>${renderArr[i].cases}</td>
    `;
    //把tr创建到tbody里面
    oTBody.appendChild(oTr);
  }

  //渲染页码
  //找到所有的1，2，3，4的页码
  var aPageBtn = document.querySelectorAll(".pageBtn");
  //删除所有的页码
  for (var i = 0; i < aPageBtn.length; i++) {
    oPagination.removeChild(aPageBtn[i].parentNode);
  }
  //根据数据的长度重新创建页码
  for (var i = 1; i <= Math.ceil(searchData.length / count); i++) {
    //创建li
    var oLi = document.createElement("li");
    //给li创建内容
    oLi.innerHTML = `<a class="pageBtn" href="#">${i}</a>`;
    //如果li和当前的页码一致，给他加一个选中的class
    if (i == page) {
      oLi.classList.add("active");
    }
    //在下一页的前面插入页码
    oPagination.insertBefore(oLi, oPagination.lastElementChild);
  }
}
//一上来就渲染一次数据
render();
//给分页加事件
oPagination.addEventListener("click", changePage);
function changePage() {
  //如果当前点击的按钮有pageBtn这个class名字
  if (event.target.className == "pageBtn") {
    //修改全局的page
    page = event.target.innerText;
    //渲染table，渲染分页
    render();
  }
}
//给上一页和下一页加事件
oPrevBtn.addEventListener("click", prev);
oNextBtn.addEventListener("click", next);
function prev() {
  if (page > 1) {
    page--;
    render();
  }
}
function next() {
  if (page < Math.ceil(data.length / count)) {
    page++;
    render();
  }
}

//搜索
oSearchBtn.addEventListener("click", searchFn);
function searchFn() {
  page = 1;
  render();
}

//点击重置
oResetBtn.addEventListener("click", resetPage);
function resetPage() {
  location.reload();
}

var element = document.getElementById("toExcel");
var toExcel = function (event) {
  // 获得表格数据的html标签和文本d;
  var html =
    "<html><head><meta charset='UTF-8'></head><body>" +
    document.querySelector(".table").outerHTML +
    "</body></html>";
  // 创建一个Blob对象，第一个参数是文件的数据，第二个参数是文件类型属性对象
  var blob = new Blob([html], { type: "application/vnd.ms-excel" });
  var a = event.target;
  // 利用URL的createObjectURL方法为元素a生成blobURL
  a.href = URL.createObjectURL(blob);
  // 设置文件名
  a.download = "信息登记统计表";
};
element.onclick = toExcel;
